<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./lib/vue.js"></script>
		<script src="./lib/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			
			<input type="text" v-model="name1"/>+
			<input type="text" v-model="name2"/>=
			<input type="text" v-model="name3" />
			<p>{{name3}}</p>
		</div>
	</body>
	
	<script>
		
		var vm = new Vue({
			el:'#app',
			data:{
				name1:'',
				name2:''
			},
			methods:{},
			computed:{
				//该属性叫做（计算机属性），
				//本质：就是一个方法,只不过我们在使用时，把他们的名称直接当作属性来使用的，并不会把计算属性当作方法去调用
				'name3':function(){ 
		//注意：计算属性，在引用的时候，一定不要加（）去调用，直接把它当作普通属性去使用就好了
		//注意：只要计算属性哦那个，这个function内部，所用到的任何data中的数据发送了变化，就会立即重新计算这个计算属性的值
		//注意：计算属性的求职结果，会被缓存起来，方便下次直接使用；如果 计算属性方法中，所以来的任何数据，都没有发生变化，则，不会重新对计算属性求值
					return this.name1 + '--' + this.name2
				}
			}
		})
	</script>
</html>
